import React from 'react';
import {Layout, Modal} from 'antd';
import './index.less';
import {connect} from "dva";
import Curd from "components/Curd";
import DataTable from "components/Base/DataTable";
import Button from "components/Base/Button";
import Icon from "components/Base/Icon";
import BaseComponent from "components/Base/BaseComponent";
import BindedDevices from "./PushSetDevices";

const {Content, Footer, Header} = Layout;

@connect(({pushSetList}) => ({pushSetList}))
export default class extends BaseComponent {

  state = {
    visible: false,
  }

  getNamespace() {
    return 'pushSetList';
  }

  getTableColumns(self) {
    return [
      {
        title: 'id',
        name: 'id',
        formItem: {
          type: 'hidden'
        },
      },
      {
        title: 'url',
        name: 'url',
        tableItem: {},
        formItem: {
          rules: [
            {
              required: true,
              message: '请输入推送url'
            }
          ]
        },
      },
      {
        title: '状态',
        name: 'state',
        dict: [
          {code: "0", codeName: '启用'},
          {code: "1", codeName: '未启用'}],
        tableItem: {
          filters: [
            {
              value: "0",
              text: '启用',
            },
            {
              value: "1",
              text: '未启用',
            },
          ]
        },
        formItem: {
          type: 'select',
          rules: [
            {
              required: true,
              message: '请选择是否启用'
            }
          ]
        }
      },

      {
        title: '推送数据类型',
        name: 'dataType',
        dict: [
          {code: "BP_DATA", codeName: '血压推送'},
          {code: "SPO_DATA", codeName: '血氧推送'}],
        tableItem: {
          filters: [
            {
              value: "BP_DATA",
              text: '血压推送',
            },
            {
              value: "SPO_DATA",
              text: '血氧推送',
            },
          ]
        },
        formItem: {
          type: 'select',
          rules: [
            {
              required: true,
              message: '请选择推送类型'
            }
          ]
        }
      },
      ,

      {
        title: '传输类型',
        name: 'pushType',
        dict: [
          {code: "MLNX_HTTP_PUSH_TYPE", codeName: 'HTTP协议'},
          {code: "MLNX_TCP_PUSH_TYPE", codeName: 'TCP协议'},
          {code: "KINGT_HTTP_PUSH_TYPE", codeName: '金唐HTTP协议'},],
        tableItem: {
          filters: [
            {
              value: "MLNX_HTTP_PUSH_TYPE",
              text: 'HTTP协议',
            },
            {
              value: "MLNX_TCP_PUSH_TYPE",
              text: 'TCP协议',
            },
            {
              value: "KINGT_HTTP_PUSH_TYPE",
              text: '金唐HTTP协议',
            },
          ]
        },
        formItem: {
          type: 'select',
          rules: [
            {
              required: true,
              message: '请选择传输类型'
            }
          ]
        }
      },
      {
        title: '最大推送次数',
        name: 'maxPushTimes',
        tableItem: {},
        formItem: {
          rules: [
            {
              required: true,
              message: '请输入推送次数'
            }
          ]
        },
      },

      {
        title: '设备',
        name: 'devices',
        tableItem: {
          render: (text, record) => {
            return (
              <DataTable.Oper>
                <a onClick={e => {
                  self.props.showBindDevices(record.id);
                }}>
                  <span>查看设备</span>
                </a>
              </DataTable.Oper>
            );
          }
        },
        formItem: {
          type: 'hidden'
        }
      },

      {
        title: '操作',
        tableItem: {
          width: 180,
          render: (text, record) => (
            <DataTable.Oper>
              <Button tooltip="修改" onClick={e => self.onUpdate(record)}>
                <Icon type="edit"/>
              </Button>
              <Button tooltip="删除" onClick={e => self.onDelete(record)}>
              <Icon type="trash"/>
            </Button>
            </DataTable.Oper>
          )
        }
      }
    ]
      ;
  }

  getSearchColumns(){
    return [{
      title: '设备id',
      name: 'deviceId',
      searchItem: {}
    }];
  }

  showBindDevices = (pushId) => {
    this.setState({visible: true, pushId});
  }

  handleCancel = () => {
    this.setState({visible: false});
  }

  render() {

    const {visible, pushId} = this.state;

    const curdProps = {
      ...this.props,
      namespace: 'pushSetList',
      tableColumns: this.getTableColumns,
      searchColumns: this.getSearchColumns,
      showBindDevices: this.showBindDevices,
      align: 'center',
    }

    return (
      <Layout>
        <Content>
          <Curd {...curdProps}/>
          <Modal
            title="绑定的设备列表"
            visible={visible}
            width={700}
            onCancel={this.handleCancel}
            footer={null}
          >
            <BindedDevices pushId={pushId}/>
          </Modal>
        </Content>
      </Layout>
    );
  }

}
